<template>
    <div class="panel-tab__content">
        <el-form size="mini" label-width="90px" @submit.native.prevent>
            <el-form-item :label="`${elementBaseInfo.$type === 'bpmn:Process'?'流程Key':'节点ID'}`">
                <el-input
                        v-model="elementBaseInfo.id"
                        clearable
                        @change="updateBaseInfo('id')"
                />
            </el-form-item>
            <el-form-item :label="`${elementBaseInfo.$type === 'bpmn:Process'?'流程':'节点'}名称`">
                <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')"/>
            </el-form-item>
            <!--流程的基础属性-->
            <template v-if="elementBaseInfo.$type === 'bpmn:Process'">
                <el-form-item label="流程分类">
                    <el-input v-model="modelData.category"/>
                </el-form-item>
                <el-form-item label="版本号">
                    <el-input-number v-model="modelData.version" :min="1" :controls="false" style="width: 100%;"/>
                </el-form-item>
                <el-form-item label="版本标签">
                    <el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')"/>
                </el-form-item>
                <el-form-item label="可执行">
                    <el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否"
                               @change="updateBaseInfo('isExecutable')"/>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>
<script>

    export default {
        name: "ElementBaseInfo",
        props: {
            businessObject: Object,
            type: String,
            idEditDisabled: {
                type: Boolean,
                default: true
            },
            modelData: Object
        },
        data() {
            return {
                elementBaseInfo: {},
            };
        },
        watch: {
            businessObject: {
                immediate: false,
                handler: function (val) {
                    if (val) {
                        this.$nextTick(() => this.resetBaseInfo());
                    }
                }
            }
        },
        methods: {
            resetBaseInfo() {
                this.bpmnElement = window?.bpmnInstances?.bpmnElement;
                this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
            },
            updateBaseInfo(key) {
                const attrObj = Object.create(null);
                attrObj[key] = this.elementBaseInfo[key];
                if (key === "id") {
                    window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
                        id: this.elementBaseInfo[key],
                        di: {id: `${this.elementBaseInfo[key]}_di`}
                    });
                } else {
                    window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
                }
            }
        },
        beforeDestroy() {
            this.bpmnElement = null;
        }
    };
</script>
